<template>
	<div class="root-calendar">
		<div class="control-wrapper">
			<div class="year-wrapper">
				<el-button v-for="(year, index) in years" :key="index" :type="year.isCurrent ? 'primary' : ''"
					@click="changeYear(year)">
					{{ year.value }}年
				</el-button>
			</div>
			<div class="btn-wrapper">
				<el-button type="primary" icon="el-icon-check" @click="submit">设置节假日</el-button>
			</div>
		</div>
		<div class="calendar-wrapper" :style="{ height: `${calendarHeight}px` }">
			<div class="calendar" v-for="(calendar, index) in calendars" :key="index">
				<ny-calendar :default-selected-dates="calendar.selectedDates" :current-date="calendar.date" can-select
					@date-selected="dateSelected">
				</ny-calendar>
			</div>
		</div>
	</div>
</template>

<script>
	import _ from 'lodash';
	// import {
	// 	get1year, //业务接口，获取初始化的整年节假日
	// 	set1year //业务接口，设置正年的节假日
	// } from '@/api/khxt/holidays/index.js';

	export default {
		data() {
			return {
				years: [],
				currentYear: new Date().getFullYear(),
				calendars: [],
				calendarHeight: 0,
			}
		},
		created() {
			this.defaultSelectedDates = []
			this.selectedDates = []
			this.tempSelectedDates = []
			
			this.years = this.createYears();
			this.calendars = this.createDates(new Date().getFullYear())
		},
		mounted() {
			this.calendarHeight = window.document.body.clientHeight - 150;
			window.addEventListener('resize', () => {
				this.calendarHeight = window.document.body.clientHeight - 150;
			});
			
			this.getHolidays();
		},
		computed: {},
		methods: {
			getHolidays() {
				this.tempSelectedDates = []
				// get1year({ year: this.currentYear }).then(res => {
				// 	const data = res.data
				// 	let result = []
				// 	data.forEach(d => {
				// 		const { date } = d
				// 		result.push(date)
				// 	})
				// 	this.defaultSelectedDates = result
				// });

				//静态测试数据，应该从业务接口获取
				this.defaultSelectedDates = [
					"2023-01-01", "2023-01-02", "2023-01-07", "2023-01-08", "2023-01-14", "2023-01-15", "2023-01-21",
					"2023-01-22", "2023-01-23", "2023-01-24", "2023-01-25", "2023-01-26", "2023-01-27", "2023-02-04",
					"2023-02-05", "2023-02-11", "2023-02-12", "2023-02-18", "2023-02-19", "2023-02-25", "2023-02-26",
					"2023-03-04", "2023-03-05", "2023-03-11", "2023-03-12", "2023-03-18", "2023-03-19", "2023-03-25",
					"2023-03-26", "2023-04-01", "2023-04-02", "2023-04-05", "2023-04-08", "2023-04-09", "2023-04-15",
					"2023-04-16", "2023-04-22", "2023-04-29", "2023-04-30", "2023-05-01", "2023-05-02", "2023-05-03",
					"2023-05-07", "2023-05-13", "2023-05-14", "2023-05-20", "2023-05-21", "2023-05-27", "2023-05-28",
					"2023-06-03", "2023-06-04", "2023-06-10", "2023-06-11", "2023-06-17", "2023-06-18", "2023-06-22",
					"2023-06-23", "2023-06-24", "2023-07-01", "2023-07-02", "2023-07-08", "2023-07-09", "2023-07-15",
					"2023-07-16", "2023-07-22", "2023-07-23", "2023-07-29", "2023-07-30", "2023-08-05", "2023-08-06",
					"2023-08-12", "2023-08-13", "2023-08-19", "2023-08-20", "2023-08-26", "2023-08-27", "2023-09-02",
					"2023-09-03", "2023-09-09", "2023-09-10", "2023-09-16", "2023-09-17", "2023-09-23", "2023-09-24",
					"2023-09-29", "2023-09-30", "2023-10-01", "2023-10-02", "2023-10-03", "2023-10-04", "2023-10-05",
					"2023-10-06", "2023-10-14", "2023-10-15", "2023-10-21", "2023-10-22", "2023-10-28", "2023-10-29",
					"2023-11-04", "2023-11-05", "2023-11-11", "2023-11-12", "2023-11-18", "2023-11-19", "2023-11-25",
					"2023-11-26", "2023-12-02", "2023-12-03", "2023-12-09", "2023-12-10", "2023-12-16", "2023-12-17",
					"2023-12-23", "2023-12-24", "2023-12-30", "2023-12-31"
				]
				//把整年的选中日期分配到每个月，这个数据结构的组装过程应该在服务端构建更好
				this.calendars.forEach(calendar => {
					calendar.selectedDates = []
					this.defaultSelectedDates.forEach(dsd => {
						if(dsd.indexOf(calendar.date) !== -1) {
							calendar.selectedDates.push(dsd)
						}
					})
				})
				// console.log(this.calendars)
			},
			createYears() {
				let result = []
				const dt = new Date()
				const curYear = dt.getFullYear()
				for (let i = 5; i >= -1; i--) {
					result.push({
						value: curYear - i,
						isCurrent: i === 0
					})
				}
				return result
			},
			createDates(curYear) {
				let result = []
				for (let i = 1; i <= 12; i++) {
					result.push({
						date: curYear + '-' + (i < 10 ? `0${i}` : i)
					})
				}
				return result
			},
			changeYear(year) {
				this.years.forEach(y => {
					y.isCurrent = false;
				})
				year.isCurrent = true;

				this.currentYear = year.value;

				this.calendars = this.createDates(year.value)

				this.getHolidays();
			},
			dateSelected(val) {
				//我这边服务端需要全量返回，包括默认选中的内容，你也可以根据业务自己构建返回数据
				if (val.selectedDates) {
					this.tempSelectedDates = this.defaultSelectedDates.concat(this.tempSelectedDates).concat(val
						.selectedDates)
					this.tempSelectedDates = Array.from(new Set(this.tempSelectedDates));
				}
				if (val.removeDate) {
					this.tempSelectedDates.splice(this.tempSelectedDates.indexOf(val.removeDate), 1);
					const index = this.defaultSelectedDates.indexOf(val.removeDate);
					if (index !== -1) {
						this.defaultSelectedDates.splice(index, 1);
					}
				}
				let result = []
				this.tempSelectedDates.forEach(sd => {
					result.push({
						date: sd
					})
				})
				this.selectedDates = result
			},
			submit: _.debounce(function() {
				this.$confirm('是否确认提交', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						const param = {
							year: this.currentYear,
							holidays: this.selectedDates
						}
						// set1year(param).then(res => {
						// 	this.$notify.success({
						// 		title: '通知',
						// 		message: res.message
						// 	});

						// 	this.getHolidays();
						// })
						//打印最终提交结果数据
						console.log(param);
					})
					.catch(() => {
						this.loading = false;
						this.$message({
							type: 'info',
							message: '已取消'
						});
					});
			}, 300),
		}
	};
</script>

<style lang="scss" scoped>
	.root-calendar {
		display: flex;
		flex-direction: column;

		.control-wrapper {
			display: flex;
			justify-content: center;
			align-items: center;

			.year-wrapper {
				flex: 1;
				padding: 10px;
			}

			.btn-wrapper {
				flex: 0 0 100px;
				padding: 10px;
			}
		}

		.calendar-wrapper {
			// height: calc(100vh - 150px);
			overflow-y: auto;
			// flex: 1;
			display: flex;
			flex-wrap: wrap;

			.calendar {
				flex: 0 0 33.333%;
				padding: 10px;
			}
		}
	}
</style>